<!-- 病害审核页面 -->
<template>
	<view class="dis-review">
		<navBar :title="`${titleObj.navTitle}${titleObj.branchLineName ? '(' + titleObj.branchLineName + ')' : ''}`  || ''"></navBar>
		<view class="content-colot"></view>
		<view>
			<view class="text-site">
				{{titleObj.subTitle}}
			</view>
			<view class="box">
				<searchCom class="search-input " v-model="searchText" style="margin-top: 120rpx;" @enter="determine"
					@change="searchChange"></searchCom>
			</view>
			<scroll-view scroll-y="true" style="height:calc(100vh - 500rpx);">
				<view class="all-content">
					<view class="t-content" v-for="(it,i) in form" :key="i">
						<view class="top-content">
							<view class="top-ring">{{getContent(it)}}</view>
							<view class="top-lv" :class="{'re':it.rankClass === 'tall','ye':it.rankClass === 'central', 'bl':it.rankClass === 'bottom' || it.rankClass === 'nought'}">{{it.diseaseGradeName || ''}}{{it.diseaseNo || ''}}</view>
							<view class="top-con">{{it.repairOrderStateName}}</view>
						</view>
						<view class="bottem-ev-text">{{it.diseaseStatus}}</view>
						<view class="" style="display: flex;">
							<view class="bottem-ev">
								截止日期：
							</view>
							<view class="bottem-ev" :class="getDate(it.repairEndDate) < getDate(new Date()) ? 'red' : ''">{{ getTime(it.repairEndDate || '') }}</view>
						</view>

						<view class="but-t">
							<view class="bottem-time">工单号：{{it.repairOrderNo || ''}}</view>
							<view class="but-sh" @click="toExamine(i)" v-show="it.repairOrderStateName != '待审核'">
								{{it.repairOrderStateName === '未开始' ? '开始维修' 
								:it.repairOrderStateName === '维修中' ? '继续填报'
								: '重新上报'
								}}
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="form.length === 0" mode="list" text="暂无维修数据" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</scroll-view>
			<view class="footer-button">
				<view class="button-placeholder"></view>
				<view class="button-group">
					<button class="button-primary" @click="clickAdd">新增维修</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixins from "@/utils/mixins.js"
	import {
		repairList, // 待维修列表
	} from '@/api/engineeringMaintenance/maintenanceTask.js'
	import navBar from "@/components/navBar/navBar.vue"
	import searchCom from "@/components/searchCom.vue"
	export default {
		name: 'notRepaired',
		components: {
			navBar,
			searchCom

		},
		mixins:[mixins],
		data() {
			return {
				searchText: undefined,
				form: [],
				common_params:{},	//dispatch组件带过来的入参
				titleObj:{
					navTitle:'',
					siteTitle:'',
					subTitle:'',
					
				}
			}

		},
		onLoad(params) {
			this.common_params = JSON.parse(params.recordParams)
			console.log(this.common_params, '==');
			this.titleObj = JSON.parse(params.titleParams)
		},
		onShow() {
			this.repairList()
		},
		mounted() {
			// this.repairList()
		},
		methods: {
			/**
			 * 输入框值变化的时候
			 * @param {String} val
			 */
			searchChange(val) {
				this.searchText = val
				if(this.searchText === '') {
					this.searchText = undefined
				}
				this.repairList()
			},
			determine(ev) {
				console.log(ev)
			},
			toExamine(e) {
				console.log(e,'选择项')
				uni.navigateTo({
					url: "/subpackage-enginner/pages/engineeringMaintenance/repair/components/startMaintenance",
					 success: (res)=>{
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('getLists', { data: this.form, e: e })
					  }
				})
			},
			/**
			 * 获取未维修列表
			 * @params // 区间站点id 站点type
			 * 
			 */
			repairList(){
				let params = {
					// keyword:this.searchText,
					...this.common_params,
					type:'repair',
					keyword:this.searchText,
					projectId:uni.getStorageSync('isOwner')
				}
				repairList({params}).then(res => {
						if (res.status === 1 && res.success) {
							this.form = res.result.list.filter(it => it.orderState !== 'complete')
						}
					})
			},
			// 切换背景颜色
			status(str) {
					if(str === 'tall') {
						return 're'
					}else if(str === 'central') {
						return 'ye'
					}else if(str === 'bottom' || str === 'nought') {
						return 'bl'
					}else {
						return 'bl'
					}
			},
			//截止日期
			getTime(str) {
				if(!str) return ''
				return this.getDate(str)
			},
			clickAdd() {
				uni.navigateTo({
					url: `/subpackage-enginner/pages/engineeringMaintenance/repair/components/startMaintenance?buttonType=addButton&lineSiteInfo=${JSON.stringify(this.common_params)}`,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dis-review {
		/* #ifdef MP-WEIXIN */
			padding-top: 180rpx;
		/* #endif */
		.box{
			width: 90%;
			margin-left: 28rpx;
		}
		.content-colot {
			height: 30rpx;
			background: #F5F7FA;
		}

		.text-site {
			// height: 100rpx;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #445469;
			// line-height: 70rpx;
			margin: 48rpx 0 30rpx 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.search-input {
			margin-top: 20rpx !important;
		}

		.all-content {
			    padding-top: 10rpx;
			.t-content {
				padding:26rpx 0 20rpx 32rpx;
				border-bottom: 2rpx dashed #f4f4f5;
				padding-top: 20rpx;
			}

			.top-content {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.top-ring {
					width: auto;
					// height: 44rpx;
					// max-width: 340rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #445469;
					line-height: 38rpx;
					margin-right: 20rpx;
				}

				.top-lv {
					width: auto;
					clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 38rpx;
					background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%);
					text-align: center;
					padding: 0 20rpx;
					
				}

				.top-con {
					min-width: max-content;
					clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
					height: 40rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 38rpx;
					background: #C6CDD8;
					text-align: center;
					// padding: 0 14rpx;
					  
				}
			}
			
			.bottem-ev {
				margin-top: 20rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #6A819E;
				line-height: 32rpx;
				
			}
			.red{
				color: #FF6A6A;
			}
			.bottem-ev-text{
				margin-top: 20rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #6A819E;
				line-height: 32rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 90%;
			}
			.but-t {
				display: flex;
				justify-content: space-between;

				.bottem-time {
					margin-top: 20rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #6A819E;
					line-height: 32rpx;
					max-width: 350rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.but-sh {
					// width: 130rpx;
					padding: 0 16rpx;
					margin-right: 34rpx;
					height: 52rpx;
					background: #2F80ED;
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 52rpx;
					text-align: center;
				}
			}

			.ye {
				background: linear-gradient(90deg, #FF882B 0%, #FF9F3D 100%) !important;
			}

			.re {
				background: linear-gradient(90deg, #FF2B2B 0%, #FF603D 100%) !important;
			}

			.bl {
				background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%) !important;
			}
		}
	}
</style>
